<template>
    <view class="page-box">
        <header class="header">
            <view class="protuct-name row verCenter">
                <view class="pic">
                    <image :src="info.logo" mode="aspectFill"></image>
                </view>
                <text class="tt">{{info.product_name}}</text>
            </view>
            <view class="info row verCenter">
                <view class="column bor rowCenter verCenter" style="width: 264rpx;">
                    <text class="t1">{{info.product_quota}}万</text>
                    <text class="tt">最高额度</text>
                </view>
                <view class="column rowCenter verCenter" style="width: calc(100% - 264rpx);">
                    <text class="t1">
                        <template v-if="info.annual_profit_rate_min && info.annual_profit_rate_max">
                            <template v-if="info.annual_profit_rate_min === info.annual_profit_rate_max">
                                {{info.annual_profit_rate_min}}%
                            </template>
                            <template v-else>
                                {{info.annual_profit_rate_min}} ~ {{info.annual_profit_rate_max}}%
                            </template>
                        </template>
                        <template v-else-if="info.annual_profit_rate_min">
                            {{info.annual_profit_rate_min}}%
                        </template>
                        <template v-else-if="info.annual_profit_rate_max">
                            {{info.annual_profit_rate_max}}%
                        </template>
                    </text>
                    <text class="tt">年化利率</text>
                </view>
            </view>
        </header>
        <section class="section">
            <view class="column-bar">
                <view class="title">产品优势</view>
                <view class="product-advantages column rowCenter">
                    <view class="box row verCenter" v-for="(item,index) in info.product_advantages" :key="index">
                        <image src="../../static/gou.png" mode="aspectFill"></image>
                        <text>{{item}}</text>
                    </view>
                </view>
            </view>
            <view class="grade">
                <view class="box level1 column rowCenter verCenter" :class="{curr:level == 1}">
                    <image src="../../static/level1.png"></image>
                    <text>钻石</text>
                </view>
                <view class="box level2 column rowCenter verCenter" :class="{curr:level == 3}">
                    <image src="../../static/level2.png"></image>
                    <text>王者</text>
                </view>
                <view class="box level3 column rowCenter verCenter" :class="{curr:level == 4}">
                    <image src="../../static/level3.png"></image>
                    <text>机构合伙人</text>
                </view>
            </view>
            <view class="column-bar white">
                <view class="title">级别说明</view>
                <view class="level-description column rowCenter">
                    <view class="box row">
                        <image src="../../static/level-1.png"></image>
                        <view class="column text">
                            <text class="tt">钻石</text>
                            <text class="t1">成功推荐客户获得推广佣金<br />达到一定任务标准可升级为王者</text>
                        </view>
                    </view>
                    <view class="box row">
                        <image src="../../static/level-2.png"></image>
                        <view class="column text">
                            <text class="tt">王者</text>
                            <view class="row">
                                <text class="t2">置顶政策：</text>
                                <text class="t3">个人和所属团队成员者享有市场上最优<br />佣金政策</text>
                            </view>
                            <view class="row">
                                <text class="t2">裂变获客：</text>
                                <text class="t3">组建业务团队，并可为团队成员自定义<br />佣金政策</text>
                            </view>
                        </view>
                    </view>
                    <view class="box row">
                        <image src="../../static/level-1.png"></image>
                        <view class="column text">
                            <text class="tt">机构合伙人</text>
                            <view class="row">
                                <text class="t2">技术支持：</text>
                                <text class="t3">搭建专属实时产品查询后台，并支持自 有产品上架功能</text>
                            </view>
                            <view class="row">
                                <text class="t2">系统支持：</text>
                                <text class="t3">搭建专属实时产品查询后台，并支持自 有<br />产品上架功能</text>
                            </view>
                            <view class="row">
                                <text class="t2">运营支持：</text>
                                <text class="t3">搭建自己公司的系统，提升公司品牌形象</text>
                            </view>
                            <view class="row">
                                <text class="t2">产品支持：</text>
                                <text class="t3">API直连对接单子明确高效</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="application-area">
                <view class="title">客户可申请区域</view>
                <view class="area row bothSide verCenter">
                    <view class="row verCenter">
                        <text class="t1">当前城市</text>
                        <text class="iconfont icon-a-tubiaochangyongsousuo14"></text>
                        <text class="t2">{{city}}</text>
                        <text class="bb row verCenter rowCenter" v-if="flag">可申请</text>
                        <text class="bb row verCenter rowCenter" style="opacity: 0.5;color: #6e767a;border: 1px solid #6e767a;" v-else>不可申请</text>
                    </view>
                    <view class="row verCenter" style="position: relative;">
                        <text class="iconfont icon-a-tubiaochangyongsousuo15"></text>
                        <uni-data-picker :localdata="region" placeholder="更换城市" popup-title="请选择城市" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
                    </view>
                </view>
            </view>
            <view class="detail-data">
                <view class="tab row avarage">
                    <view class="box" @click="tab(0)" :class="{curr:curr==0}">产品要素</view>
                    <view class="box" @click="tab(1)" :class="{curr:curr==1}">车辆要求</view>
                    <view class="box" @click="tab(2)" :class="{curr:curr==2}">产品规则</view>
                </view>
                <view class="table-grid column">
                    <template v-if="curr == 0">
                        <view class="box row row verCenter" v-for="(item,index) in info.product_elements" :key="index">
                            <view class="left row rowCenter verCenter">{{item.title}}</view>
                            <view class="right">{{item.content}}</view>
                        </view>
                    </template>
                    <template v-else-if="curr == 1">
                        <view class="box row row verCenter" v-for="(item) in info.car_demands" :key="item.title">
                            <view class="left row rowCenter verCenter">{{item.title}}</view>
                            <view class="right">{{item.content}}</view>
                        </view>
                    </template>
                    <template v-else-if="curr == 2">
                        <view class="box row row verCenter" v-for="(item) in info.product_rules" :key="item.title">
                            <view class="left row rowCenter verCenter">{{item.title}}</view>
                            <view class="right">{{item.content}}</view>
                        </view>
                    </template>
                </view>
                <a class="view-btn row rowCenter verCenter" :href="info.product_apply_detail_url">查看产品申请详细资料</a>
            </view>
            <view class="application-process">
                <view class="title">申请流程</view>
                <view class="process">
                    <view class="box column rowCenter verCenter">
                        <image src="../../static/process.png" mode="aspectFill"></image>
                        <view class="circle row rowCenter verCenter">01</view>
                        <text>扫码申请</text>
                    </view>
                    <view class="box column rowCenter verCenter">
                        <image src="../../static/process.png" mode="aspectFill"></image>
                        <view class="circle row rowCenter verCenter">02</view>
                        <text>额度审批</text>
                    </view>
                    <view class="box column rowCenter verCenter">
                        <image src="../../static/process.png" mode="aspectFill"></image>
                        <view class="circle row rowCenter verCenter">03</view>
                        <text>合同签署</text>
                    </view>
                    <view class="box column rowCenter verCenter">
                        <image src="../../static/process.png" mode="aspectFill"></image>
                        <view class="circle row rowCenter verCenter">04</view>
                        <text>权证抵押</text>
                    </view>
                    <view class="box column rowCenter verCenter">
                        <view class="circle row rowCenter verCenter">05</view>
                        <text>放款结算</text>
                    </view>
                </view>
                <a class="view-btn row rowCenter verCenter" :href="info.product_apply_process_url">查看产品详细申请流程</a>
            </view>
        </section>
        <view class="btn-box row verCenter">
            <navigator class="ask-me row rowCenter verCenter" url="/pages/menu/index?type=6">
                <image src="../../static/kefu.png" mode="aspectFill"></image>
                <text class="t1">问一问</text>
            </navigator>
            <navigator class="accurate-matching row rowCenter verCenter" url="/pages/productMatch/index" open-type="switchTab">
                <text class="iconfont icon-a-tubiaochangyongsousuo10"></text>
                <text class="t2">精准匹配</text>
            </navigator>
        </view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    export default {
        data() {
            return {
                curr: 0,
                id: '',
                info: {},
                level: 0,
                region: [], //城市列表
                city: '深圳市', //默认城市
                flag: true
            };
        },
        onLoad(options) {
            this.id = options.id;
            this.getRegion();
        },
        onShow() {
            this.getData();
        },
        methods: {
            getData() {
                this.request(API.productDetail, 'GET', { id: this.id }, true).then(res => {
                    if (res.code === 0) {
                        this.info = res.data;
                        const commissionPercentage = Number(this.info.king_commission) / 100; // 将佣金转换为百分比
                        const earn = Math.round(Number(this.info.product_quota) * commissionPercentage); // 四舍五入去除小数
                        this.info.earn = earn;
                        this.info.product_quota = Number(this.info.product_quota) / 10000;
                        uni.setNavigationBarTitle({
                            title: res.data.product_name + ' - 产品详情'
                        });
                        this.getUserInfo(); //获取登录之后的身份等级
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 获取地址
             */
            getRegion() {
                this.request(API.getRegion, 'GET', {}, true).then(res => {
                    if (res.code === 0) {
                        this.region = res.data[0].children;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            tab(index) {
                this.curr = index;
            },
            /**
             * 获取用户的位置
             */
            getLocation() {
                uni.getLocation({
                    type: 'wgs84', // 获取 GPS 坐标
                    success: function(res) {
                        const latitude = res.latitude; // 纬度
                        const longitude = res.longitude; // 经度

                        const key = '691dfb8640af370de02c61be2f167ade';
                        const url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=${key}`;

                    },
                    fail: function(error) {
                        console.error('获取地理位置失败', error);
                    }
                });
            },
            getUserInfo() {
                uni.request({
                    method: 'GET',
                    url: API.getUserInfo,
                    header: {
                        "Content-Type": "application/json; charset=utf-8"
                    },
                    dataType: 'json',
                    withCredentials: true
                }).then((response) => {
                    let [error, res] = response;
                    var data = res.data;
                    if (data.code == 0) {
                        //类型：[0普通 1钻石，2星耀(废弃)，3王者 4合伙人]
                        this.level = data.data.level;
                    }
                });
            },
            /**
             * 立即推广 先验证下是否登录
             */
            spread() {
                this.request(API.getUserInfo, 'GET', {}, true).then(res => {
                    if (res.code === 0) {
                        uni.navigateTo({
                            url: '/pages/product/shareProduct?id=' + this.id
                        })
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 监听城市
             * @param {Object} e
             */
            onchange(e) {

            },
            /**
             * 选择城市
             * @param {Object} node
             */
            onnodeclick(node) {
                console.log(node)
                this.flag = this.info.product_area.includes(node.text);
                this.city = node.text;
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/product/detail.scss';

    ::v-deep {
        .selected-area {
            font-size: 24rpx !important;
            color: #6E767A !important;
            line-height: 33rpx !important;
        }
    }
</style>